<template>
    <el-row :gutter="20">
        <el-col :span="12">
            <el-card>
                <el-descriptions direction="vertical" border style="margin-top: 20px">
                    <el-descriptions-item :rowspan="2" :width="140" label="个人头像" align="center">
                        <el-image style="width: 100px; height: 100px"
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    </el-descriptions-item>
                    <el-descriptions-item label="姓名">kooriookami</el-descriptions-item>
                    <el-descriptions-item label="电话">13609564325</el-descriptions-item>
                    <el-descriptions-item label="地址">福建省福州市连江县</el-descriptions-item>
                    <el-descriptions-item label="个人标签">
                        <el-tag class="mr" type="primary" size="small">打飞机</el-tag>
                        <el-tag class="mr" type="success" size="small">打炮</el-tag>
                        <el-tag class="mr" type="info" size="small">玩鸡鸡</el-tag>
                        <el-tag class="mr" type="danger" size="small">玩坤坤</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <el-card class="mt">
                <el-calendar v-model="value" />
            </el-card>
            <el-card class="mt">
                <template #header>
                    <div class="card_header">
                        <span>完善个人资料</span>
                    </div>
                </template>
                <el-row :gutter="20">
                    <el-col :span="16">
                        <stepForm :steps="steps" :form1="form1" :form2="form2">
                            <template #step-1>
                                <el-form ref="form1" :model="PersonParams">
                                    <el-form-item label="姓名：">
                                        <el-input v-model="PersonParams.basicInfo.username">11</el-input>
                                    </el-form-item>
                                    <el-form-item label="电话：">
                                        <el-input v-model="PersonParams.basicInfo.tel"></el-input>
                                    </el-form-item>
                                    <el-form-item label="地址：">
                                        <el-input v-model="PersonParams.basicInfo.address"></el-input>
                                    </el-form-item>
                                </el-form>
                            </template>
                            <template #step-2>
                                <el-form ref="form2" :model="PersonParams">
                                    <el-select placeholder="请选中你的工作状态" v-model="PersonParams.incumbentInfo.status">
                                        <el-option label="工作中" :value="1"></el-option>
                                        <el-option label="请假中" :value="2"></el-option>
                                        <el-option label="出差中" :value="3"></el-option>
                                        <el-option label="年假中" :value="4"></el-option>
                                    </el-select>
                                </el-form>
                            </template>
                        </stepForm>
                    </el-col>
                    <el-col :span="8">
                        <div class="process">
                            <h3 class="mt mb">资料完善度</h3>
                            <el-progress type="circle" :percentage="percentNum"></el-progress>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card>
                <el-badge :value="12" class="item mr">
                    <el-button>待办事项</el-button>
                </el-badge>
                <el-badge :value="3" class="item mr">
                    <el-button>指派给我</el-button>
                </el-badge>
                <el-badge :value="1" class="item mr" type="primary">
                    <el-button>部公告</el-button>
                </el-badge>
                <el-badge :value="2" class="item mr" type="warning">
                    <el-button>站内信</el-button>
                </el-badge>
                <el-badge :value="1" class="item mr" color="green">
                    <el-button>我指派的</el-button>
                </el-badge>
            </el-card>
            <el-card class="mt">
                <el-collapse>
                    <el-collapse-item title="账号注销通知！" name="1">
                        <div style="display: flex;justify-content: space-between;" class="mt">
                            <h3>员工离职，账号需要注销，请及时处理！</h3>
                            <el-button type="primary" size="small" class="mr" v-permission="'admin'">去处理</el-button>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="权限变更通知！" name="2">
                        <div style="display: flex;justify-content: space-between;">
                            <h3>王丽丽因部门调动账号权限需调整！</h3>
                            <el-button type="primary" size="small" class="mr" v-permission="'user'">去处理</el-button>
                        </div>

                    </el-collapse-item>
                    <el-collapse-item title="财务放款通知！" name="3">
                        <div style="display: flex;justify-content: space-between;">
                            <h3>北京充电站充电桩维修放款！</h3>
                            <el-button type="primary" size="small" class="mr">去处理</el-button>
                        </div>

                    </el-collapse-item>
                    <el-collapse-item title="人员调动通知！" name="4">
                        <div style="display: flex;justify-content: space-between;">
                            <h3>李继维由行政部转为维修部，需要办理！</h3>
                            <el-button type="primary" size="small" class="mr">去处理</el-button>
                        </div>

                    </el-collapse-item>
                    <el-collapse-item title="出差费用报销审批" name="5">
                        <div style="display: flex;justify-content: space-between;">
                            <h3>运营部7人出差，报销费用8700元需审批</h3>
                            <el-button type="primary" size="small" class="mr">去处理</el-button>
                        </div>

                    </el-collapse-item>
                    <el-collapse-item title="财务放款通知！" name="6">
                        <div style="display: flex;justify-content: space-between;">
                            <h3>北京充电站充电桩维修放款！</h3>
                            <el-button type="primary" size="small" class="mr">去处理</el-button>
                        </div>

                    </el-collapse-item>
                    <el-collapse-item title="人员调动通知！" name="7">
                        <div style="display: flex;justify-content: space-between;">
                            <h3>李继维由行政部转为维修部，需要办理！</h3>
                            <el-button type="primary" size="small" class="mr">去处理</el-button>
                        </div>

                    </el-collapse-item>
                    <el-collapse-item title="出差费用报销审批" name="8">
                        <div style="display: flex;justify-content: space-between;">
                            <h3>运营部7人出差，报销费用8700元需审批</h3>
                            <el-button type="primary" size="small" class="mr">去处理</el-button>
                        </div>

                    </el-collapse-item>
                    <el-collapse-item title="账号注销通知！" name="9">
                        <div style="display: flex;justify-content: space-between;">
                            <h3>员工离职，账号需要注销，请及时处理</h3>
                            <el-button type="primary" size="small" class="mr">去处理</el-button>
                        </div>

                    </el-collapse-item>
                    <el-collapse-item title="权限变更通知！" name="10">
                        <div style="display: flex;justify-content: space-between;">
                            <h3>王丽丽因部门调动账号权限需调整！</h3>
                            <el-button type="primary" size="small" class="mr">去处理</el-button>
                        </div>

                    </el-collapse-item>
                    <el-collapse-item title="财务放款通知！" name="11">
                        <div style="display: flex;justify-content: space-between;">
                            <h3>北京充电站充电桩维修放款！</h3>
                            <el-button type="primary" size="small" class="mr">去处理</el-button>
                        </div>

                    </el-collapse-item>
                </el-collapse>
            </el-card>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import type { FormInstance } from 'element-plus';
import stepForm from '@/components/stepForm/stepForm.vue';
interface stepType {
    title: string
}

const value = ref(new Date())
const form1 = ref<FormInstance>()
const form2 = ref<FormInstance>()
const steps = ref<stepType[]>([
    { title: '基本信息' },
    { title: '在职信息' },
])
interface PersonParams {
    basicInfo: { username: string, tel: string, address: string },
    incumbentInfo: { status: any }
}
const PersonParams = ref<PersonParams>({
    basicInfo: {
        username: '',
        tel: '',
        address: ''
    },
    incumbentInfo: {
        status: ''
    }
})

const percentNum = computed(() => {
    const { basicInfo, incumbentInfo } = PersonParams.value
    const fieldsToCheck = [
        basicInfo.username,
        basicInfo.tel,
        basicInfo.address,
        incumbentInfo.status
    ]
    const percent = fieldsToCheck.length
    const empytCount = fieldsToCheck.filter((item: any) => item !== '').length
    const percentPerEmpty = 100 / percent
    return empytCount * percentPerEmpty
})
</script>

<style scoped lang="less">
.process {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
}
</style>